import React, { useEffect, useState } from 'react';
import classNames from 'classnames';
import styles from './index.less';

export default props => {
  const [width, setWidth] = useState(null);

  useEffect(() => {
    const resizeFooterToolbar = () => {
      const sider = document.querySelector('.ant-layout-sider');
      if (sider) {
        const newWidth = `calc(100% - ${sider.style.width})`;
        if (width !== newWidth) {
          setWidth(newWidth);
        }
      }
    };
    window.addEventListener('resize', resizeFooterToolbar);
    window.dispatchEvent(new Event('resize'));
    return () => {
      window.removeEventListener('resize', resizeFooterToolbar);
    };
  }, []);

  const { children, className, style, ...rest } = props;

  return (
    <div
      className={classNames(className, styles.toolbar)}
      style={{ width, textAlign: 'right', ...style }}
      {...rest}
    >
      {children}
    </div>
  );
};
